<template>
    <div>
        <div class="sssj">
            <div class="top">
                <div class="top_l">
                    <span class="bord">实时数据</span>
                    <span class="gray">统计截止 {{ date }} 24:00</span>
                </div>
                <div>
                    <el-date-picker
                        @change="changeDate"
                        v-model="datevalue"
                        type="date"
                        placeholder=""
                        :disabled-date="disabledDate"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                    />
                </div>
            </div>
        </div>
        <div class="mg-b-20 infobox">
            <div class="title">
                <span class="mg-r-10">日日保</span>
            </div>
            <div class="itembox mg-b-20">
                <div class="item">
                    <div class="light">日保客户(人）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.clientCount"
                        />
                        <span class="light">人</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">今日开户(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalOpen"
                        /><span class="light">个</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">充值公司(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalCompany"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">充值金额(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalRecharge"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">使用公司(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.insurTotalCompany"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
            </div>
            <div class="itembox">
                <div class="item">
                    <div class="light">投保人数(人）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalHeadcount"
                        /><span class="light">人</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">投保金额(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalPrice"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">投保成本(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalCost"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">报案数(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="daymsg.totalReport"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
                <div class="item"></div>
            </div>
        </div>
        <div class="infobox">
            <div class="title">
                <span class="mg-r-10">长期保</span>
            </div>
            <div class="itembox mg-b-20">
                <div class="item">
                    <div class="light">长期保客户(人）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.clientCount"
                        />
                        <span class="light">人</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">今日开户(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalOpen"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">充值公司(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalCompany"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">充值金额(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalRecharge"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">使用公司(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.insurTotalCompany"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
            </div>
            <div class="itembox">
                <div class="item">
                    <div class="light">投保人数(人）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalHeadcount"
                        />
                        <span class="light">人</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">投保金额(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalPrice"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">投保成本(元）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalCost"
                        />
                        <span class="light">元</span>
                    </div>
                </div>
                <div class="item">
                    <div class="light">报案数(个）</div>
                    <div class="dark">
                        <CountUp
                            class="fs-24 bold fm-din-bold"
                            :decimalPlaces="0"
                            :end-val="longmsg.totalReport"
                        />
                        <span class="light">个</span>
                    </div>
                </div>
                <div class="item"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { getqueryyesterdayinsureinfolistapi } from '../../api/api'
import CountUp from 'vue-countup-v3'
onMounted(() => {
    date.value = dayjs().format('YYYY-MM-DD')
    datevalue.value = dayjs().format('YYYY-MM-DD')
    getqueryyesterdayinsureinfolist()
})
const changeDate = () => {
    getqueryyesterdayinsureinfolist()
}
const getqueryyesterdayinsureinfolist = () => {
    getqueryyesterdayinsureinfolistapi({ date: datevalue.value }).then(
        (res: any) => {
            console.log(res, 'msgmsgmsg')
            daymsg.value = res.daily
            longmsg.value = res.period
        }
    )
}
const daymsg = ref<any>({})
const longmsg = ref<any>({})
const date = ref('')
const datevalue = ref('')
const disabledDate = (time: any) => {
    const today = new Date()
    return time.getTime() > today.getTime()
}
</script>

<style scoped lang="scss">
.infobox {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;

    .itembox {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
            width: 19%;
            background-color: #fafafc;
            border-radius: 4px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 25px;
    }
}

.sssj {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 20px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top_l {
            .bord {
                color: #3d3d3d;
                font-size: 16px;
                font-weight: 700;
                margin-right: 12px;
            }

            .gray {
                font-size: 12px;
                color: #9497b1;
            }
        }

        .top_r {
            width: 157px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #d1d7f3;
            border-radius: 4px;
            cursor: pointer;

            .topritem {
                height: 26px;
                line-height: 26px;
                flex: 1;
                text-align: center;
                font-size: 12px;
                color: #9eaffa;
            }
        }
    }
}

.light {
    font-size: 14px;
    color: #9497b1;
}

.dark {
    font-size: 24px;
    font-weight: 700;
    color: #202536;
    display: flex;
    align-items: center;
}
</style>
